{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %} 登录 {% endblock %}

{% block styles %}
    {{ super() }}
    <link rel="shortcut icon" href="{{ url_for('static',filename='img/favicon.ico') }}" type="image/x-icon"/>
    <link href="{{ url_for('static', filename='adminlte/bower_components/font-awesome/css/font-awesome.min.css') }}"
          rel="stylesheet" xmlns="http://www.w3.org/1999/html">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 100vh;
            background-image: url({{ url_for('static', filename='img/loginbg.jpg') }});
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            overflow: hidden;
        }

        .container {
            margin: auto;
            display: grid;
            /* 指定每一行的宽度 每个宽度中间用空格隔开 */
            grid-template-rows: repeat(3, 200px);
            /* 指定每一列的宽度 每个宽度中间用空格隔开 */
            grid-template-columns: 600px;
            justify-content: center;
        }

        .login-box {
            display: flex;
            justify-content: center;
            align-content: space-around;
            flex-wrap: wrap;
            width: 600px;
            height: 400px;
            background-color: rgba(0, 0, 0, .4);
            border: 10px;
            padding: 20px 50px;
            border-radius: 20px;
        }

        .login-box h4 {
            width: 100%;
            display: flex;
            justify-content: center;
            color: aliceblue;
            font-size: 30px;
        }

        .login-box .input-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            transform: translateY(-35px);
        }

        .login-box .input-box .input-text {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .login-box .input-box .input-text span {
            color: aliceblue;
            font-size: 18px;
            margin-top: 20px;

        }

        .login-box .input-box .input-text span i {
            width: 25px;
            height: 25px;
        }

        .login-box .input-box .input-text input {
            border: 0;
            padding: 6px;
            border-bottom: 1px solid white;
            background-color: #ffffff00;
            color: #fff;
            margin-top: 20px;
        }

        .login-box .input-box .checkbox {
            color: #fff;
        }

        .login-box .input-box .button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 25px;
            width: 145px;
            height: 25px;
            color: #fff;
            background: linear-gradient(120deg, #a6c0fe 0%, #2E8B57 100%);
            border-radius: 25px;
            cursor: pointer;
        }

        .login-box .input-box .signup {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 40px;
            color: #fff;
            font-size: 15px;
        }

        .login-box .input-box .signup a {
            color: #a6c0fe;
            text-decoration: none;
        }

        .page-bottom {
            text-align: center;
            margin: 0px auto;
            width: 100%;
            bottom: 3px;
            z-index: 9999;
            position: fixed;
            color: #fff;
        }
    </style>
{% endblock styles %}

{% block content %}
    {% for category, message in get_flashed_messages(with_categories=True) %}
        <div class="alert alert-{{ category }}">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}
        </div>
    {% endfor %}
    <div class="container">
        <div class="login-box item1">
            <h4>登录</h4>
            <div class="input-box">
                {#{{ wtf.quick_form(form, id='loginform', action='/auth/login', form_type='horizontal', horizontal_columns=('lg',4,4)) }}#}
                <form class="" action="{{ action }}" method="{{ method }}" id="{{ formid }}">
                    {{ form.hidden_tag() }}
                    <div class="input-text">
                        <span class="login-login"><i id="username" class="fa fa-user-o"></i></span>
                        {{ form.username(class='',placeholder="用户名") }}
                    </div>
                    <div class="input-text">
                        <span class="login-passwd"><i id="userpass" class="fa fa-lock"></i></span>
                        {{ form.password(class='',placeholder="密码") }}
                    </div>
                    <div class="checkbox">
                        <label for="rememberme">{{ form.remember_me() }}记住我</label>
                    </div>
                    <div class="button" onclick="document.getElementById('submit').click()">
                        登录
                        <button type="submit" id="submit" style="display: none;"></button>
                    </div>
                    <div class="signup">
                        {% if reg_show %}
                        <span>点击此处 <a href="{{ url_for('auth.register') }}">注册新用户</a></span>
                        {% endif %}
                    </div>
                </form>

            </div>
            {#    <script type="text/javascript">#}
            {#        $('.alert').fadeOut(1500);#}
            {#    </script>#}
        </div>
    </div>
    <div class="page-bottom">
    </div>
{% endblock %}

